<template>
	<view class="profile-container">
		<!-- 用户基本信息卡片 -->
		<view class="user-card">
			<view class="avatar-section">
				<view class="avatar-wrapper">
					<image class="avatar" :src="userInfo.avatar || '/static/default-avatar.png'" mode="aspectFill">
					</image>
					<view class="edit-avatar" @click="chooseAvatar">
						<uv-icon name="edit-pen" color="#fff" size="24"></uv-icon>
					</view>
				</view>
				<text class="username">{{userInfo.username}}</text>
			</view>
		</view>

		<!-- 信息列表 -->
		<view class="info-list">
			<uv-cell-group>
				<uv-cell title="姓名" :value="userInfo.realName" @click="showEditDialog('realName')" isLink></uv-cell>
				<uv-cell title="手机号" :value="userInfo.phone" @click="showEditDialog('phone')" isLink></uv-cell>
				<uv-cell title="邮箱" :value="userInfo.email" @click="showEditDialog('email')" isLink></uv-cell>
				<uv-cell title="部门" :value="userInfo.department"></uv-cell>
				<uv-cell title="职位" :value="userInfo.position"></uv-cell>
			</uv-cell-group>
		</view>

		<!-- 编辑弹窗 -->
		<uv-popup :show="showPopup" @close="closePopup" mode="center">
			<view class="popup-content">
				<view class="popup-title">编辑{{editTitle}}</view>
				<uv-input v-model="editValue" :placeholder="'请输入' + editTitle"></uv-input>
				<view class="popup-buttons">
					<uv-button @click="closePopup" text="取消"></uv-button>
					<uv-button type="primary" @click="saveEdit" text="保存"></uv-button>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'

	const showPopup = ref(false)
	const editField = ref('')
	const editValue = ref('')
	const editTitle = ref('')

	const userInfo = reactive({
		username: 'admin',
		realName: '张三',
		avatar: '',
		phone: '13800138000',
		email: 'zhangsan@example.com',
		department: '技术部',
		position: '开发工程师'
	})

	// 检查登录状态
	const checkLogin = () => {
		const token = uni.getStorageSync('token')
		if (!token) {
			uni.$uv.toast('请先登录')
			setTimeout(() => {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}, 1500)
			return false
		}
		return true
	}

	// 获取用户信息
	const getUserInfo = () => {
		if (!checkLogin()) return
		
		uni.$uv.http.get('/api/yyplatform/admin/layout/profile/info').then(res => {
			if (res.code === 0) {
				Object.assign(userInfo, res.data)
			}
		})
	}

	// 修改现有方法，添加登录检查
	const showEditDialog = (field) => {
		if (!checkLogin()) return
		const titleMap = {
			realName: '姓名',
			phone: '手机号',
			email: '邮箱'
		}
		editField.value = field
		editTitle.value = titleMap[field]
		editValue.value = userInfo[field]
		showPopup.value = true
	}

	const closePopup = () => {
		showPopup.value = false
		editValue.value = ''
	}

	const saveEdit = () => {
		if (!checkLogin()) return
		// TODO: 调用接口保存修改
		userInfo[editField.value] = editValue.value
		showPopup.value = false
		uni.$uv.toast('保存成功')
	}

	const chooseAvatar = () => {
		if (!checkLogin()) return
		uni.chooseImage({
			count: 1,
			sizeType: ['compressed'],
			sourceType: ['album', 'camera'],
			success: (res) => {
				// TODO: 调用接口上传头像
				userInfo.avatar = res.tempFilePaths[0]
				uni.$uv.toast('头像更新成功')
			}
		})
	}

	onMounted(() => {
		getUserInfo()
	})
</script>

<style lang="scss">
	.profile-container {
		min-height: 100vh;
		background-color: #f5f5f5;

		.user-card {
			background-color: #fff;
			padding: 40rpx;
			margin-bottom: 20rpx;

			.avatar-section {
				display: flex;
				flex-direction: column;
				align-items: center;

				.avatar-wrapper {
					position: relative;
					width: 150rpx;
					height: 150rpx;
					margin-bottom: 20rpx;

					.avatar {
						width: 100%;
						height: 100%;
						border-radius: 75rpx;
					}

					.edit-avatar {
						position: absolute;
						right: 0;
						bottom: 0;
						width: 50rpx;
						height: 50rpx;
						background-color: rgba(0, 0, 0, 0.6);
						border-radius: 25rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				.username {
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}

		.info-list {
			background-color: #fff;
		}

		.popup-content {
			background-color: #fff;
			width: 600rpx;
			padding: 30rpx;
			border-radius: 12rpx;

			.popup-title {
				font-size: 32rpx;
				font-weight: bold;
				text-align: center;
				margin-bottom: 30rpx;
			}

			.popup-buttons {
				display: flex;
				justify-content: space-around;
				margin-top: 30rpx;
			}
		}
	}
</style>